<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>订单列表</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/mrs.css{$JSDEBUG}"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css{$JSDEBUG}"/>
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="__FONT__/js/mustache.js"></script>
    <style>
		*{
		    margin: 0;
		    padding:0;
		    -webkit-tap-highlight-color:rgba(0,0,0,0);
		    -webkit-text-size-adjust:none;
		}
		html{
		    font-size:10px;
		}
		body{
		    background-color: #f7f7f9;
		    font-size: 1.2em;
		}
		.outer{position:absolute;top:40px;width:100%;height:470px;background:#f7f7f9;}
		.hide{display:none;}
    </style>
</head>
<body style="background:#f7f7f9;padding-top: 0;">
	<header class="orderhead">
       <div class="orderself clear">
       	  <if condition="$beautician['profile_img']">
	       <img src="__UPLOADS__/Profile/{$beautician.profile_img}">
	       <else />
	       <img src="__FONT__/images/defaultProfile.png">
	       </if>
          <ul>
             <li>{$beautician.name}</li>
             <li>{$beauty.name}</li>
          </ul>
       </div>
       <div class="mycz">
          <ul>
             <li><a>接单：<span>{$serviceTotal}</span></a></li>
             <li><a>评价：<span>{$beautician.comment_total}</span></a></li>
             <li>评分：<span>{$start}</span></li>
          </ul>
       </div>
    </header>
 	<section class="order_sec">
 		<div class="tab">
          <ul class="tab_order_list clear">
              <li class="on" data-type="order"><span>已接单({$total})</span><i></i></li>
              <li data-type="complete"><span>已完成({$totalCompleteOrder})</span><i></i></li>
              <li data-type="cancel"><span>已取消({$cancelOrder})</span></li>
          </ul>
          <div class="order_box" id="order"></div>
          <div class="order_box" id="complete" style="display: none;"></div>
          <div class="order_box" id="cancel" style="display: none;"></div>
        </div>
	</section>
    <include file="Public/beautician-footer" />
    <script>
    	var itemTemplete = '<div class="boxing clear" data-id="{{id}}">'
            +'<a href="{:U(\'/Beautician/showOrder\')}?id={{id}}" class="bbac">'
            +'<h1><span>{{format_time}}</span><label class="status">{{#current}}服务中{{/current}}{{#start}}即将开始{{/start}}</label></h1>'
            +'<dd><span>地址：</span><label>{{service_address}}</label></dd>'
            +'<dd><span>客户：</span><label>{{user_info.username}}</label><strong>{{user_info.mobile}}</strong></dd>'
            +'<dd><span>项目：</span><label>{{service_name}}（到店）</label></dd>'
            +'</a>' 
            +'{{^hideMenu}}<ul class="clear">'
            +'<li><a href="tel:{{user_info.mobile}}">拨打</a></li>'
            +'<li><a href="http://api.map.baidu.com/marker?location={{beauty.latitude}},{{beauty.longitude}}&title={{service_address}}&content={{service_address}}&output=html">导航</a></li>'
            +'{{#start}}'
            +'<li><a href="javascript:void(0);" class="start">开始</a></li>'
            +'<li class="hide" ><a href="javascript:void(0);" class="servise completeUse">服务中</a></li>'
            +'<li class="hide"><a href="{:U(\'Comments/replyComment\')}?id={{id}}" class="finish">查看评论</a></li>'
            +'{{/start}}'
            +'{{#current}}'
            +'<li><a href="javascript:void(0);" class="channel_btn {{^check_complete}}servise{{/check_complete}}{{#check_complete}}finish completeUse{{/check_complete}}">{{^check_complete}}服务中{{/check_complete}}{{#check_complete}}完成{{/check_complete}}</a></li>'
	        +'<li class="hide"><a href="{:U(\'Comments/replyComment\')}?id={{id}}" class="finish">查看评论</a></li>'
	        +'{{/current}}'
	        +'{{#complete}}'
	        +'<li><a href="{:U(\'Comments/replyComment\')}?id={{id}}" class="finish">查看评论</a></li>'
	        +'{{/complete}}'
       		+'</ul>{{/hideMenu}}'
       +'</div>';
	function tab(a,b,c){
		if(c==1){
			$(a).click(function(){ 
				var _this = $(this);
			   	var index = $(_this).index();

			   	var container = $(b+":eq("+index+")");
			   	var hasData = container.find('.boxing').length;
			   	var type = $(this).attr('data-type');
			   	if (type == 'order') {
			   		type = '';
			   		hasData = false;
			   		container.empty();
			   	}
			   	if (!hasData) {
				   $.ajax({
					   url: '{:U("/Beautician/beauticianOrder")}',
					   data: {'type': type},
					   dataType: 'json',
					   success: function (result) {
						   if (result.status == 1) {
							   if (type == '' && result.current) {
								   timerFun(result.timer, result.current.order_id);
							   }
								$(_this).addClass("on").siblings().removeClass("on");
							   	$(b).hide();
							   	
							   	if (!result.data.length) {
							   		var text = $('.tab_order_list li.on span').text().replace(/\(.\)/,'');
							   		container.html('<div class="no_bank"><h1>美滴滴</h1><p>没有'+text+'订单~</p></div>');
							   	} else {
								   	var html = '';
								   	var data = result.data;
								   	
								   	for (var i in data) {
								   		var order = data[i];
								   		if (order.status == '1') {
								   			if (i == 0) {
								   				order.willStart = true;
								   			}
								   			order.start = true;
									   	} else if (order.status == '3') {
									   		order.current = true;
									   	} else if (order.status == '4') {
									   		order.complete = true;
									   	} else if  (order.status == '5') {
									   		order.hideMenu = true;
									   	}
								   		
								   		html += Mustache.render(itemTemplete, order);
								   	}
								   	
								   	var $itemList = $(html);
								   	container.append($itemList);
								   	
								   	$.each($itemList, function (i, o) {
								   		itemBind(o);
								   	})
							   	}
							   	container.show();
						   }
					   }
				   });
			   } else {
				 	$(_this).addClass("on").siblings().removeClass("on");
				  	$(b).hide();
				  	$(b+":eq("+index+")").show();
			   }
			})
		} else {
			 $(a).hover(function(){  
			   var index = $(this).index();
			   $(this).addClass("on").siblings().removeClass("on");
			   $(b).hide();      
			   $(b+":eq("+index+")").show();
			})
		}        
	}
	
	var timer;
	function timerFun(t, id) {
		clearTimeout(timer);
		timer = setTimeout(function () {
			var completBtn = $('[data-id="'+id+'"]').find('ul .servise').parents('li');
			completBtn.prev().remove();
			completBtn.removeClass('hide').find('a').addClass('mrs_btn').text('完成');
		}, t);
	}
	
	var completeUse, startUse;
	function itemBind(item) {
		$(item).find('.start').click(function (e) {
			if (!confirm('您确定开始该订单')) {
				return false;
			}
			var _this = $(this),
				wrap = $(_this).parents('div.boxing'),
				id = $(wrap).attr('data-id');
			
			if (startUse && startUse.state() == 'pending') {
				return false;
			}
			
			startUse = $.ajax({
				url: '{:U("/Beautician/startUse")}',
				data:{id:id},
				dataType: 'json',
				success: function (result) {
					if (result.status) {
			    		var next = $(_this).parents('li').next();
			    		next.removeClass('hide');
			    		$(_this).parents('li').remove();
			    		
			    		$(wrap).find('.status').empty().append('服务中');
			    		if (result.complete) {
			    			next.find('a').removeClass('servise')
			    				.addClass('finish')
			    				.addClass('mrs_btn').text('完成');
			    		} else {
			    			
			    			timer = setTimeout(function () {
				    			next.find('a').addClass('mrs_btn').text('完成');
				    		}, result.time);
			    		}
					} else {
						alert(result.message);
						return false;
					}
				},
				error: function () {
					alert('请求中断，稍候再试');
				}
			});
			
			return false;
		});
		
		$(item).find('.completeUse').click(function (e) {
			if (!confirm('您确定该订单已完成')) {
				return false;
			}
			
			var _this = $(this),
				wrap = $(_this).parents('div.boxing'),
				id = $(wrap).attr('data-id');
			
			
			if (completeUse && completeUse.state() == 'pending') {
				return false;
			}
			
			completeUse = $.ajax({
				url: '{:U("/Beautician/completeUse")}',
				data:{id:id},
				dataType: 'json',
				success: function (result) {
					if (result.status) {
						_this.parents('li').next().removeClass('hide');
						_this.parents('li').remove();
						
						var totalReg = new RegExp('\\d+'),
							orderTotalElem = $('[data-type="order"] span'),
							completeTotalElem =  $('[data-type="complete"] span');
						
						var order = totalReg.exec(orderTotalElem.text()).pop();
						var complete = totalReg.exec(completeTotalElem.text()).pop();
						
						orderTotalElem.text(orderTotalElem.text().replace(totalReg, --order));
						completeTotalElem.text(completeTotalElem.text().replace(totalReg, ++complete));
						
						if ($('#complete').find('.boxing').length) {
							$('#complete').find('.boxing:first').before(wrap);
						} else {
							wrap.remove();
						}
					} else {
						alert(result.message);
						return false;
					}
				},
				error: function () {
					alert('请求中断，稍候再试');
				}
			});
			
			return false;
		});
	}
		
    $(function () {
    	tab(".tab_order_list li",".order_box",1);
    	
    	$('[data-type="order"]').click();
    	//功能：阻止事件默认行为
    	function stopDefault( e ) {
    	     // 阻止默认浏览器动作(W3C)
    	     if ( e && e.preventDefault ) {
    	         e.preventDefault();
    	     } else {
    	        // IE中阻止函数器默认动作的方式
    	        window.event.returnValue = false;
    	    }
    	    return false;
    	}
    });
    </script>
</body>
</html>